<template>
  <transition name="fade" enter-active-class="fadeInDown" leave-active-class="fadeOutUp">
    <div id="choose-com" v-show="chooseShow" :chooseShow="chooseShow">
      <div class="c-box-1 m-moneybox">
        <div class="choose-input-box" style="width:100%">
          <span size="30"  class="iconfont icon-sousuo"></span>
          <input maxlength="8" type="text" class="choose-input" v-model="choose.parkid" placeholder="请输入充电桩ID号" />
        </div>
      </div>

      <div class="c-box-2">
        <mu-list>
          <mu-list-item>
            <mu-list-item-content>
              <mu-list-item-sub-title>
                <div class="fleft order-timebox order-title" @click="showstime">
                  <div class="time-title">开始时间</div>
                  <div class="time-des">{{starttime}}</div>
                </div>
                <div class="hour-box">
                  <span class="hour">至</span>
                </div>

                <div class="fright order-timebox order-title" @click="showetime">
                  <div class="time-title">结束时间</div>
                  <div class="time-des">{{endtime}}</div>
                </div>
                <div class="_clear"></div>
              </mu-list-item-sub-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-divider></mu-divider>
          <mu-list-item>
            <mu-list-item-content>
              <mu-list-item-title @click="showState">
                订单状态
                <span size="25" class="fright iconfont icon-narrow"></span>
                <span class="fright">{{state}}</span>
              </mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-divider></mu-divider>
          <mu-list-item>
            <mu-list-item-content>
              <mu-list-item-title @click="showAddress">
                地区
               <span size="25" class="fright iconfont icon-narrow"></span>
                <span class="fright">{{choose.address}}</span>
              </mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-divider></mu-divider>
          <mu-list-item>
            <mu-list-item-content>
              <mu-list-item-title @click="showXiaoQu">
                小区
               <span size="25" class="fright iconfont icon-narrow"></span>
                <span class="fright">{{choose.xiaoqu}}</span>
              </mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-divider></mu-divider>
          <!-- <mu-list-item>
            <mu-list-item-content>
              <mu-list-item-title @click="showequip">
                设备
                <mu-icon value="chevron_right" size="25" class="fright"></mu-icon>
                <span class="fright">{{choose.equip}}</span>
              </mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-divider></mu-divider>-->
          <mu-list-item>
            <mu-list-item-content>
              <mu-list-item-title class="c-btn-box">
                <mu-button class="blur-btn btn fleft out-btn" @click="close">取消</mu-button>
                <mu-button class="blur-btn btn fright" @click="submit">确定</mu-button>
                <div class="_clear"></div>
              </mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
        </mu-list>
      </div>
      <van-popup v-model="stimeshow" position="bottom" class="bottom-picker">
        <van-datetime-picker
          v-model="start.currentDate"
          type="date"
          :min-date="start.minDate"
          :max-date="start.maxDate"
          @confirm="startTimeChange"
          @cancel="stimeshow = false"
        />
      </van-popup>
      <van-popup v-model="etimeshow" position="bottom" class="bottom-picker">
        <van-datetime-picker
          v-model="end.currentDate"
          type="date"
          :min-date="end.minDate"
          :max-date="end.maxDate"
          @confirm="endTimeChange"
          @cancel="etimeshow = false"
        />
      </van-popup>
      <van-popup v-model="addshow" position="bottom" class="bottom-picker">
        <van-area
          cancel-button-text=" "
          :area-list="areaList"
          :columns-placeholder="['请选择', '请选择', '请选择']"
          title="请选择地区"
          @confirm="cityChange"
        />
      </van-popup>

      <!-- <van-popup v-model="equipshow" position="bottom" class="bottom-picker">
        <p class="choose-text">请选择设备</p>
        <mu-slide-picker
          :slots="equipSlots"
          :visible-item-count="5"
          @change="equipChange"
          :values="equip"
        ></mu-slide-picker>
      </van-popup>-->
          <van-popup v-model="stateshow" position="bottom" class="bottom-picker">
        <van-picker
          :columns="statusList"
          @confirm="statusChange"
          show-toolbar
          title="请选择订单状态"
          cancel-button-text=" "
        />
      </van-popup>
      <van-popup v-model="xiaoquShow" position="bottom" class="bottom-picker">
        <van-picker
          :columns="xiaoquList"
          @confirm="xiaoquChange"
          show-toolbar
          title="请选择小区"
          cancel-button-text=" "
        />
      </van-popup>
    </div>
  </transition>
</template>

<script>
import Vue from "vue";
import { Popup, Toast } from "vant";
import { DatetimePicker } from "vant";
import { Area } from "vant";

import { Picker } from "vant";
import province_list from "@/utils/area.js";
import "vant/lib/popup/style/index";
import "vant/lib/area/style/index";
import "vant/lib/datetime-picker/style/index";
import { formatDate } from "../../utils/formart";
Vue.use(DatetimePicker);
Vue.use(Popup);
Vue.use(Area);
Vue.use(Picker);
export default {
  name: "choose",
  data() {
    return {
      chooseShow: false,
      xiaoquShow: false,
      addshow: false,
      stateshow: false,
      equipshow: false,
      stimeshow: false,
      etimeshow: false,
      areaList: province_list,
      state:'',
      a:new Date(),
      start: {
        minHour: 10,
        maxHour: 20,

        maxDate: new Date(),
        currentDate: new Date()
      },

      end: {
        minHour: 10,
        maxHour: 20,
        minDdate: this.starttime,
        maxDate: new Date(),
        currentDate: new Date()
      },
      choose: {
        citypolt: "",
        xiaoqu: "",
        xiaoquId: "",
        state: '',
        stime: formatDate(new Date(), "yyyy-MM-dd"),
        etime: formatDate(new Date(), "yyyy-MM-dd"),
        parkid:'',
      },
      xiaoquList: [],
      statusList:[
          {code:"1",text:"已下单"},
          {code:"2",text:"取消"},
          {code:"3",text:"支付成功"},
          {code:"4",text:"退款"},
          {code:"5",text:"完成"}
      ],
      starttime: formatDate(new Date(), "yyyy-MM-dd"),
      endtime: formatDate(new Date(), "yyyy-MM-dd"),

    };
  },
  mounted(){
    // this.$api.getCodesByParent(5).then(res=>{
    //    let a = window.JSON.stringify(res.data.data)
    //         .replace(/codeName/g, "text")
    //
    //       let b = window.JSON.parse(a);
    //
    //       this.statusList = b;
    // })
  },
  methods: {
    Showchoosediv() {
      this.chooseShow = true;
    },
    showXiaoQu() {
      if (this.choose.citypolt != "") {
        if (this.xiaoquList == "") {
          Toast("暂无该地区小区数据");
        } else {
          this.xiaoquShow = true;
        }
      }
    },
    showAddress() {
      this.addshow = true;
    },
    showState() {
      this.stateshow = true;
    },
    showequip() {
      this.equipshow = true;
    },
    showstime() {
      this.stimeshow = true;
    },
    showetime() {
      this.etimeshow = true;
    },
    addressChange(value, index) {
      this.choose.address = value;
      this.address = [value];
    },

    equipChange(value, index) {
      this.choose.equip = value;
      this.equip = [value];
    },
    endTimeChange(e) {
      if(e<this.a){
        Toast('结束时间不能小于开始时间');
        return;
      }
      this.endtime = formatDate(e, "yyyy-MM-dd");
      this.choose.etime = formatDate(e, "yyyy-MM-dd");
      this.etimeshow = false;
    },
    startTimeChange(e) {
      this.a = e;
      this.starttime = formatDate(e, "yyyy-MM-dd");
      this.choose.stime = formatDate(e, "yyyy-MM-dd");
      this.stimeshow = false;
    },
    cityChange(v) {
      this.choose.address = v[0].name + "-" + v[1].name + "-" + v[2].name;
      this.addshow = false;
      this.choose.citypolt = v[2].code;
      this.$api.getPoltList(this.choose.citypolt).then(res => {
        if ((res.data.data == "")) {
          this.xiaoquList = "";
          this.choose.xiaoqu=''
        } else {
          let a = window.JSON.stringify(res.data.data)
            .replace(/plotName/g, "text")

          let b = window.JSON.parse(a);

          this.xiaoquList = b;
        }
      });
    },
    xiaoquChange(v) {
      console.log(v);
      this.xiaoquShow = false;
      this.choose.xiaoqu = v.text;
      this.choose.xiaoquId = v.id;
    },
    statusChange(v){
      console.log(v)
      this.choose.state = v.code;
      this.state = v.text;
      this.stateshow=false;
    },

    close() {
      this.chooseShow = false;
    },
    submit() {
      this.$emit("chooseDate", this.choose);
      this.chooseShow = false;
    }
  }
};
</script>

<style>
</style>
